<template>
	<view class="page">
		<view class="top-box">
			<image src="../../static/order-bg.png" class="cout-bg" mode="widthFix"></image>
			<view class="content">
				<swiper display-multiple-items='5' :current='current' @change="change">
					<swiper-item></swiper-item>
					<swiper-item></swiper-item>
					<swiper-item v-for="(item,i) in date" :key='i' @click="current = i">
						<view class="swiper-item" :class="{
							prev: i == current-1 || i == current+1,
							next: i <= current-2 || i >= current+2
						}">{{ item.name }}</view>
					</swiper-item>
					<swiper-item v-for="(item,i) in 2" :key='i+"v"'></swiper-item>
				</swiper>
				<view class="list-box">
					<view class="flex-box align-center">
						<view class="item" @click="toUrl('/pages/storekeeper/order/index')">
							<view class="count">{{ pageData.payment?pageData.payment:'0' }}</view>
							<view class="txt">交易额</view>
						</view>
						<view class="item" @click="toUrl('/pages/storekeeper/myDevice/index')">
							<view class="count">{{ pageData.orderCount?pageData.orderCount:'0' }}</view>
							<view class="txt">成单数</view>
						</view>
						<view class="item" @click="toUrl('/pages/storekeeper/myDevice/index')">
							<view class="count">{{ pageData.visits?pageData.visits:'0' }}</view>
							<view class="txt">访问数</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="title">订单列表</view>
			<view class="item flex-box" v-if='pageData.order && pageData.order.length > 0' v-for="(item,index) in pageData.order" :key='index'>
				<view class="left">
					<text>{{item.day}}号</text>
				</view>
				<view class="right flex">
					<view class="item1" v-for="(item2,index2) in item.list" :key='index2'>
						<view class="flex-box flex-between">
							<view>订单号：{{ item2.order_code }}</view>
							<text v-if='item2.state == 0'>未支付</text>
							<text v-if='item2.state == 1 && item2.delivery == 1'>待发货</text>
							<text v-if='item2.state == 1 && item2.delivery == 2'>备货中</text>
							<text v-if='item2.state == 2 && item2.delivery == 1'>已发货</text>
							<text v-if='item2.state == 2 && item2.delivery == 2'>待取货</text>
							<text v-if='item2.state == 3'>待确认</text>
							<text v-if='item2.state == 4'>未评价</text>
							<text v-if='item2.state == 5'>已评价</text>
							<text v-if='item2.state == 6'>退款中</text>
							<text v-if='item2.state == 96'>已退款</text>
							<text v-if='item2.state == 97'>已失效</text>
							<text v-if='item2.state == 98'>已取消</text>
						</view>
						<view class="flex-box flex-between">
							<text>{{ item2.add_time }}</text>
							<view>
								<template v-if="item2.state == '96'">-</template>
								<template v-else>+</template>
								{{ item2.payment }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<empty type='1' v-if='noData' msg='本月没有相关的订单哦'></empty>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				date:[],
				current: 11,
				pageData:'',
				noData: false
			};
		},
		onLoad() {
			that = this;
			let year = new Date().getFullYear();
			let month = new Date().getMonth()+1;
			for(var i = 0;i<12-month;i++){ // 去年
				that.date.push({
					year: year-1,
					month: i+month+1<10?'0'+(i+month+1):i+month+1,
					name: i+month+1+'月'
				})
			}
			for(var i = 0;i<month;i++){ // 今年
				that.date.push({
					year: year,
					month: i+1<10?'0'+(i+1):i+1,
					name: i+1+'月'
				})
			}
			that.getList()
			// #ifdef H5
			this.$common.H5HideShare()
			// #endif
		},
		methods: {
			change(e){
				that.current = e.detail.current;
				that.getList()
			},
			getList(){
				that.noData = false
				that.$http.get({
					url: '/singleSaleManageApi/orderStatistics',
					data:{
						shop_id: uni.getStorageSync('store_id'),
						date: that.date[that.current].year+'-'+that.date[that.current].month,
						// test:1
					}
				}).then(res => {
					if(res.data){
						that.pageData = res.data
					}
					if(!that.pageData || !that.pageData.order || that.pageData.order.length < 1){
						that.noData = true
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #FFFFFF;
	}

	.top-box {
		background: linear-gradient(130deg, rgba(255, 112, 63, 0.66) 0%, #EE3C00 100%);
		position: relative;
		overflow: hidden;
		.cout-bg {
			position: absolute;
			width: 100%;
			height: 100%;
			bottom: 0;
		}
		.content {
			position: relative;
			z-index: 3;
			padding: 50rpx $page-space 40rpx;
			swiper{
				height: 72rpx;
				line-height: 72rpx;
				.swiper-item{
					color: white;
					font-size: 36rpx;
					text-align: center;
				}
				.prev{
					font-size: 28rpx;
					opacity: 0.8;
				}
				.next{
					font-size: 24rpx;
					opacity: 0.3;
				}
				position: relative;
				&::before{
					position: absolute;
					content: '';
					width: 1px;
					height: 100%;
					background-color: #FFFFFF;
					opacity: 0.12;
					left: 40%;
					top: 0;
				}
				&::after{
					position: absolute;
					content: '';
					width: 1px;
					height: 100%;
					background-color: #FFFFFF;
					opacity: 0.12;
					right: 40%;
					top: 0;
				}
			}
			

			.list-box {
				background-color: #ffffff;
				margin-bottom: $page-space;
				border-radius: $border-radius-lg;
				justify-content: space-around;

				padding: 50rpx 20rpx;
				box-shadow: 0px 0px 4rpx 0px rgba(0, 0, 0, 0.06);
				border: 2rpx solid rgba(151, 151, 151, 0.05);
				margin-top: 60rpx;

				.item {
					text-align: center;
					position: relative;

					&::before {
						content: '';
						position: absolute;
						top: 50%;
						left: 100%;
						width: 2rpx;
						height: 74rpx;
						transform: translateY(-50%);
						background-color: #EEEEEE;
					}

					&:nth-last-of-type(1)::before {
						display: none;
					}

					flex: 1;

					.menu {
						width: 56rpx;
						height: 56rpx;
						overflow: inherit;
					}

					.count {
						font-weight: 600;
						text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.06);
						font-size: 36rpx;
					}

					.txt {
						font-size: 26rpx;
						color: #666666;
						margin: 14rpx 0 6rpx;
					}

					.txt2 {
						font-size: 22rpx;
						color: #CCCCCC;
					}
				}
			}
		}
	}

	.list {
		background-color: #FFFFFF;
		min-height: 200rpx;
		position: relative;
		top: -30rpx;
		z-index: 3;
		border-radius: 20rpx 20rpx 0px 0px;
		padding: 30rpx 20rpx;
		.title{
			color: #7C7C7C;
			font-size: 28rpx;
			font-weight: 600;
			margin-bottom: 60rpx;
		}
		.item{
			.left{
				margin-right: 20rpx;
				text{
					color: #999999;
					background-color: #F5F5F5;
					line-height: 36rpx;
					padding: 0 6rpx;
					display: inline-block;
					border-radius: 8rpx;
					position: relative;
					z-index: 3;
				}
				position: relative;
				&::before{
					position: absolute;
					width: 1px;
					height: 100%;
					content: '';
					left: 50%;
					top:0;
					background-color: #ECECEC;
				}
			}
			.right{
				.item1{
					margin-bottom: 35rpx;
					>view{
						margin-bottom: 15rpx;
						text{color: #999999;}
					}
				}
			}
		}
	}
</style>
